﻿<%@ page language="java" pageEncoding="UTF-8"
         contentType="text/html;charset=UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
    request.setAttribute("basePath", basePath);
%>
<!DOCTYPE>
<html>
<head>    <title>明细信息</title>
    <%@ include file="/resources/js/easyui/taglibs.jsp" %>
    <%@ include file="/resources/js/easyui/_easyui.jsp" %>
    <%@ include file="/resources/js/easyui/_message.jsp" %>
    <%@ include file="/resources/js/easyui/_viewJS.jsp" %>
</head>

<body class="easyui-layout">
<form id="addform">
    <table class="tableForm" style="width: 100%;">

        <tr>
            <th align="right" valign="top"><span class="redStart">*</span><label>用户名：</label></th>
            <td><input class="easyui-validatebox" name="username"
                       style="width:200px"
                       data-options="required:true,validType:'username'"/></td>
        </tr>

        <tr>
            <th align="right" valign="top"><span class="redStart">*</span><label>手机号：</label></th>
            <td><input class="easyui-validatebox" name="mobile"
                       style="width:200px" data-options="required:true,validType:'mobile'"/></td>
        </tr>

        <tr>
            <th align="right" valign="top"><span class="redStart">*</span><label>邮箱地址：</label></th>
            <td><input class="easyui-validatebox" name="email"
                       style="width:200px" data-options="required:true,validType:'email'"/></td>
        </tr>

        <tr>
            <th align="right" valign="top"><span class="redStart">*</span><label>用户密码：</label></th>
            <td><input class="easyui-validatebox"
                       type="password" id="password" style="width:200px"
                       data-options="required:true,validType:'passwordlegth'"/>

                <input type="hidden" name="password" id="loginPassword"/>
            </td>
        </tr>

        <tr>
            <th align="right" valign="top"><span class="redStart">*</span><label>确认密码：</label></th>
            <td><input class="easyui-validatebox" type="password"
                       style="width:200px" data-options="required:true"
                       validType="confirmPassword['#password']"/></td>
        </tr>

        <tr>
            <th align="right" valign="top"><span class="redStart">*</span><label>支付密码：</label></th>
            <td><input class="easyui-validatebox"
                       type="password" id="transferpassword" style="width:200px"
                       data-options="required:true,validType:'passwordlegth'"/>
                <input type="hidden" name="transferpassword" id="tfPassword"/>
            </td>
        </tr>

        <tr>
            <th align="right" valign="top"><span class="redStart">*</span><label>确认支付密码：</label></th>
            <td><input class="easyui-validatebox" type="password"
                       style="width:200px" data-options="required:true"
                       validType="confirmPassword['#transferpassword']"/></td>
        </tr>
        <tr>
            <th align="right" valign="top"><span class="redStart">*</span><label>图片验证码：</label></th>
            <td><input class="easyui-validatebox" id="validCode"
                       style="width:200px" data-options="required:true"/>
                <img id="captchaImage" class="captchaImage"
                     src="${basePath}authCode" alt=""
                     style="vertical-align:middle;"
                     onclick="chageCode()"/></td>
        </tr>
        <tr>
            <th align="right" valign="top"><span class="redStart">*</span><label>短信验证码：</label></th>
            <td><input class="easyui-validatebox" id="mobilecode"
                       style="width:200px" data-options="required:true"/><input
                    type="button" value="获取验证码" id="getMoblieCode"/></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" style="margin-left: 10px;vertical-align:middle;display: none;"
                       class="easyui-linkbutton" value="注册" id="register_submit"/>
                <input type="reset" style="margin-left: 10px;vertical-align:middle"
                       class="easyui-linkbutton" id="register_reset"/>
            </td>
        </tr>

    </table>

</form>

<script type="application/javascript">

    function chageCode() {
        $('#captchaImage').attr('src', '${basePath}authCode?abc=' + Math.random());//链接后添加Math.random，确保每次产生新的验证码，避免缓存问题。
    }

    $("#getMoblieCode").click(function () {
        var moblie = $("input[name='mobile']").val();
        var validCode = $("#validCode").val();
        if (typeof(moblie) == "undefined" || moblie.length == 0  ) {
            $.messager.alert('温馨提示', '请输入您的手机号码', 'warning');
        }else if (validatorDataOnlien($("input[name='mobile']").val())) {
            $.messager.alert('温馨提醒', '手机号码已经存在,请更换手机号码', 'error');
        } else if (typeof(validCode) == "undefined" || validCode.length == 0) {
            $.messager.alert('温馨提示', '请输入您图片验证码', 'warning');
        } else {
            $.ajax({
                url: '${basePath}sms/mobileSend',
                type: 'POST',
                data: {"mobileNum": moblie, "validCode": validCode},
                traditional: true,
                error: function (response) {
                    ViewHelper.func.ajaxErrorMessage(response);
                },
                success: function (ret) {
                    console.log(ret);
                    if (ret.result) {
                        $.messager.alert('提示信息！', ret.info, 'info');
                        $("#register_submit").show();
                    } else {
                        $.messager.alert('提示', ret.info, 'error');
                    }
                }
            });
        }
    });

    $("#register_submit").click(function () {
        if ($("#addform").form('validate')) {

            if (validatorDataOnlien($("input[name='mobile']").val())) {

                $.messager.alert('温馨提醒', '手机号码已经存在,请更换手机号码', 'error');

            } else if (validatorDataOnlien($("input[name='username']").val())) {

                $.messager.alert('温馨提醒', '用户名已经存在,请更换手机号码', 'error');

            } else {
                var login_password = $("#password").val();
                var transfer_password = $("#transferpassword").val();

                var code = $("#mobilecode").val();

                $("#loginPassword").val(createPassword(login_password, login_password));
                $("#tfPassword").val(createPassword(transfer_password, transfer_password));

                $.ajax({
                    url: '${basePath}register/' + code + '/submitUserInfo',
                    type: 'POST',
                    data: $("#addform").serialize(),
                    async: false,
                    traditional: true,
                    error: function (response) {
                        ViewHelper.func.ajaxErrorMessage(response);
                    },
                    success: function (ret) {
                        if (ret.result) {
                            $.messager.confirm('温馨提醒', ret.info, function (r) {
                                if (r) {
                                    alert("完善个人信息");
                                } else {
                                    window.location = "index";
                                }
                            });
                        } else {
                            $.messager.alert('温馨提醒', ret.info, 'error');
                        }
                    }
                });
            }
        }
    });

    /* 验证手机号码、用户名或邮箱是否存在 */
    function validatorDataOnlien(value) {
        var result = true;
        $.ajax({
            url: '${basePath}register/vaildUserInfo',
            async: false,
            type: 'GET',
            data: {"vaildatorValue": value},
            traditional: true,
            success: function (ret) {
                result = ret.vaildatorResult;
            }
        });
        return result;
    }

    $.extend($.fn.validatebox.defaults.rules, {
        email: {
            validator: function (value, param) {
                if (/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value)) {
                    return true;
                } else {
                    $.fn.validatebox.defaults.rules.email.message = '请输入正确的邮箱地址';
                    return false;
                }
            },
            message: ''
        },
        mobile: {
            validator: function (value, param) {
                if (/^(?:13\d|15\d|18\d|17\d|14\d)-?\d{5}(\d{3}|\*{3})$/.test(value)) {
                    return true;
                } else {
                    $.fn.validatebox.defaults.rules.mobile.message = '请输入正确的手机号码';
                    return false;
                }
            },
            message: ''
        },
        tel: {
            validator: function (value, param) {
                return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})?(-\d{1,6})?$/.test(value);
            },
            message: '请输入正确的固话电话号码'
        },
        mobileAndTel: {
            validator: function (value, param) {
                return /(^([0\+]\d{2,3})\d{3,4}\-\d{3,8}$)|(^([0\+]\d{2,3})\d{3,4}\d{3,8}$)|(^([0\+]\d{2,3}){0,1}13\d{9}$)|(^\d{3,4}\d{3,8}$)|(^\d{3,4}\-\d{3,8}$)/.test(value);
            },
            message: '请输入正确的联系电话或手机号码'
        },
        username: {// 只能输入英文和数字和特殊字符
            validator: function (value, param) {
                /* return /^[a-zA-Z0-9_]{1,}$/.test(value); */
                if (/^[a-zA-Z0-9_]{1,}$/.test(value)) {
                    return true;
                } else {
                    $.fn.validatebox.defaults.rules.username.message = '请输入英文、数字或下划线';
                    return false;
                }
            },
            message: ''
        },
        passwordlegth: {
            validator: function (value) {
                return value.length >= 6;
            },
            message: '密码长度至少6位'
        },
        confirmPassword: {
            validator: function (value, param) {
                return value == $(param[0]).val();
            },
            message: '两次密码不一致'
        }
    });


</script>
</body>
</html>
